<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>产品上传(编辑)</title>
	<meta th:replace="admin/template/head.html"/>
	<style>

	</style>
</head>
<body>
<h3 style="color:red;font-size:16px;padding:20px;">这里是产品管理</h3>
<form class="layui-form" action="" id="form1">
	<br>
	<div class="layui-form-item" style="display: none;">
		<div class="layui-inline">
			<label class="layui-form-label">ID</label>
			<div class="layui-input-inline">
				<input type="text" name="id" id="id" th:value="${product?.id}" autocomplete="off" class="layui-input" readonly>
			</div>
		</div>
	</div>
	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">名称</label>
			<div class="layui-input-inline">
				<input type="text" name="title" id="title" th:value="${product?.title}" placeholder="产品名称" autocomplete="off" class="layui-input">
			</div>
		</div>
	</div>

	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">分类名称</label>
			<div class="layui-input-inline">
				<select name="category" id="category" lay-verify="required" >
					<option value=""></option>
					<option th:each="category:${categories}" th:value="${category.id}" th:text="${category.title}" th:selected="${product?.categoryId == category?.id}"></option>
				</select>
			</div>
		</div>
	</div>

	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">零售价</label>
			<div class="layui-input-inline">
				<input type="number" name="guidePrice" id="guidePrice" th:value="${product?.guidePrice}" placeholder="请输入零售价" autocomplete="off" class="layui-input">
			</div>
			<!--<div class="layui-form-mid c-red">以具体型号为准</div>-->
		</div>
	</div>

	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">最低价</label>
			<div class="layui-input-inline">
				<input type="number" name="lowestPrice" id="lowestPrice" th:value="${product==null? '0': product.lowestPrice}" placeholder="请输入最低价" autocomplete="off" class="layui-input" readonly>
			</div>
			<div class="layui-form-mid c-red">暂时不需要</div>
		</div>
	</div>

	<!--/////////////////////////////////////////////////封面///////////////////////////////////////////////////-->
	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">封面</label>
			<div class="layui-input-block">
				<div class="">
					<div class="layui-input-inline">
						<input type="text" class="layui-input" name="cover" id="cover" th:value="${product?.cover}" readonly/>
					</div>
					<div class="layui-form-mid c-red">注意，这行有内容图片上传才算成功！！</div>
				</div>
				<div class="layui-upload-drag" id="upload">
					<i class="layui-icon"></i>
					<p>点击上传，或将文件拖拽到此处</p>
					<div th:class="${product?.cover}? '' : 'layui-hide'" id="uploadDemoView">
						<hr>
						<img th:src="${product?.cover}? ${uriPrefix+product.cover} : ''" alt="上传成功后渲染" style="width: 400px">
					</div>
				</div>
			</div>
		</div>

	</div>
	<div class="layui-form-item">
		<div class="layui-input-block">大小不限，自动按70%品质压缩，并按宽度4000像素等比缩小</div>
	</div>

	<!--//////////////////////////////////////////////相册//////////////////////////////////////////////////////-->
	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">客户案例</label>
			<div class="layui-input-block">
				<div class="">
					<div class="layui-input-inline">
						<input type="text" class="layui-input" name="filesPath" id="filesPath" readonly/>
					</div>
					<div class="layui-form-mid c-red">注意，这行有内容图片上传才算成功！！</div>
				</div>
				<div class="layui-upload-drag" id="files">
					<i class="layui-icon"></i>
					<p>点击上传，或将文件拖拽到此处</p>
				</div>
			</div>
		</div>
	</div>
	<div class="layui-form-item">
		<div class="layui-input-block">大小不限，自动按70%品质压缩，并按宽度4000像素等比缩小</div>
	</div>


	<div class="layui-form-item">
		<div class="layui-inline">
			<div class="layui-upload" style="margin-left: 110px">
				<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
					预览：
					<div class="layui-upload-list" id="demo2">
						<!--注意，上传后是用jquery插入的，样式要写在里面-->
						<img
							style="width:300px"
							th:if="${!product?.filesPath.isEmpty()}" th:src="${uriPrefix + path}" th:each="path:${product?.filesPath}"
						>
					</div>
				</blockquote>
			</div>
		</div>
	</div>

	<!--////////////////////////////////////////////////视频////////////////////////////////////////////////////-->
	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">视频</label>
			<div class="layui-input-block">
				<div class="">
					<div class="layui-input-inline">
						<input type="text" class="layui-input" name="cover" id="videoPath" th:value="${product?.videoPath}" readonly/>
					</div>
					<div class="layui-form-mid c-red">注意，这行有内容图片上传才算成功！！</div>
				</div>
				<div class="layui-upload-drag" id="videos">
					<i class="layui-icon"></i>
					<p>点击上传，或将文件拖拽到此处</p>
					<div th:class="${!#strings.isEmpty(product?.videoPath)}? '' : 'layui-hide'" id="videoPrev">
						<hr>
						<video width="400" height="200" controls th:src="${product?.videoPath}? ${uriPrefix + product.videoPath} : ''"></video>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="layui-form-item">
		<div class="layui-input-block">大小限制：20 M</div>
	</div>

	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">图文详情</label>
			<div class="layui-input-inline">
				<div>
					<div id="editor" type="text/plain" style="width:700px;height:500px;" th:utext="${product?.description}"></div>
				</div>
			</div>
		</div>
	</div>

</form>
<div class="layui-form-item">
	<div class="layui-input-block">
		<button type="submit" onclick="doSave()" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
		<button type="reset" class="layui-btn layui-btn-primary" onclick="resetForm()">重置</button>
	</div>
</div>

<script type="text/javascript" charset="utf-8" th:src="@{/static/plugins/ueditor1_4_3_1-utf8-php/ueditor.config.js}"> </script>
<script type="text/javascript" charset="utf-8" th:src="@{/static/plugins/ueditor1_4_3_1-utf8-php/ueditor.all.min.js}"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" th:src="@{/static/plugins/ueditor1_4_3_1-utf8-php/lang/zh-cn/zh-cn.js}"></script>

<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
	//实例化编辑器
	//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
	var ue = UE.getEditor('editor');
	UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
	UE.Editor.prototype.getActionUrl = function (action) {
		if(action == "/Test/multipleCarouselFiles") {
			return "/Test/multipleCarouselFiles"
		} else {
			return this._bkGetActionUrl.call(this, action);
		}
	}
	let $, layer;
	layui.use(['form', 'layer', 'upload'], function() {
		$ = layui.jquery;
		layer = layui.layer;
		const upload = layui.upload;
		upload.render({
			elem: '#upload'
			,acceptMime: 'image/*'
			,size: 999999
			,field: 'files'
			,accept: 'images'
			,data: {type: 'products'}
			,url: '/upload' //改成您自己的上传接口
			,before: function(obj){
				//预读本地文件示例，不支持ie8
				obj.preview(function(index, file, result){
					$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', result)
				});
			}
			,done: function(res){
				layer.msg(res.msg);
				if(res.code == 0 && res.data) {
					$('#cover').val(res.data[0]);
				}
			}
		});

		//视频文件
		upload.render({
			elem: '#videos'
			,size: 20240
			,field: 'files'
			,accept: 'video'
			,data: {type: 'products'}
			,url: '/upload' //改成您自己的上传接口
			,before: function(obj){
				//预读本地文件示例，不支持ie8
				obj.preview(function(index, file, result){
					$('#videoPrev').removeClass('layui-hide').find('video').attr('src', result)
				});
			}
			,done: function(res){
				layer.msg(res.msg);
				if(res.code == 0 && res.data) {
					$('#videoPath').val(res.data[0]);
				}
			}
		});

		upload.render({
			elem: '#files'
			,url: '/upload'
			,acceptMime: 'image/*'
			,field: 'files'
			,accept: 'images'
			,data: {type: 'products'}
			,multiple: true
			,before: function(obj){
				//预读本地文件示例，不支持ie8
				obj.preview(function(index, file, result){
					$('#demo2').append('<img style="width:300px" src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">&nbsp;&nbsp;')
				});
			}
			,done: function(res){
				layer.msg(res.msg);
				//上传完毕
				let paths = $('#filesPath').val();
				if(res.code == 0 && res.data) {
					for(let i = 0; i < res.data.length; i++) {
						if(!paths) { // 第一张
							$('#filesPath').val(res.data[i]);
						} else {
							$('#filesPath').val(paths + "," + res.data[i]);
						}
					}
				}
			}
		});

	});

	function doSave() {
		let data = {
			id: $('#id').val(),
			title: $('#title').val(),
			guidePrice: $('#guidePrice').val(),
			lowestPrice: $('#lowestPrice').val(),
			categoryId: $('#category').val(),
			cover: $('#cover').val(),
			videoPath: $('#videoPath').val(),
			description: ue.getContent(),
			filesPath: $('#filesPath').val().split(',')
		}
		if(!data.title) {
			layer.msg('请输入产品名称');
			return false;
		}
        if(!data.categoryId) {
            layer.msg('请选择产品分类');
            return false;
        }
		if(!data.guidePrice) {
			layer.msg('零售价必须输入');
			return false;
		}
        if(!data.cover) {
            layer.msg('产品主图必须上传');
            return false;
        }
		let _loading = layer.load(1, {
            shade: [0.5,'#fff'], //0.1透明度的白色背景
            time: 20000
        });
		$.post('/product/edit', data, (res) => {
			if(res.code == 0 && res.data > 0) {
				parent.layer.alert(res.msg, {yes: function () {
					parent.layer.closeAll();
					parent.window.frames[0].location.reload();
				}});
			} else {
				layer.msg(res.msg);
			}

		})
	}

	const resetForm = ()=> {
		location.reload();
	}
</script>

</body>
</html>